<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">

<head>

    <title>文件详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <style>
        body {
            line-height: 1.6;
            background-color: #fff;
        }

        body, th, td, button, input, select, textarea {
            font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
            font-size: 12px;
            color: #666;
            -webkit-font-smoothing: antialiased;
            -moz-font-smoothing: antialiased;
        }

        html, body {
            height: 100%;
        }

        html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset {
            margin: 0;
            padding: 0;
        }


        .wrap {
            margin: 0px auto;
            min-width: 990px;
            max-width: 1190px
        }

        .banner1 {
            background: url(/static/v1/img/banner_jiaoyi.jpg) no-repeat 50% top;
            margin: 0 auto;
            /*height: 260px;*/
            text-align: center
        }

        .main-out {
            margin: 0 auto;
            padding: 0 0 20px 0
        }

        .orangebtn {
            background-color: #ff8400;
            display: inline-block;
            padding: 0px 20px;
            color: #fff;
            height: 50px;
            line-height: 50px;
            font-size: 18px;
            border-radius: 3px;
            margin-top: 20px
        }


        .orangebtn:hover {
            color: #fff;
            background-color: #f16600;
        }

        .banner1 h1 {
            font-size: 48px;
            color: #feff07;
            font-family: Tahoma, sans-serif;
            padding: 35px 0 20px 0
        }

        .banner1 p {
            color: #fff;
            font-size: 20px;
        }

        .domain-con {
            padding: 20px 50px;
            position: relative;
        }

        .left {
            background: #f6f6f6 url(/static/v1/img/jiaoyixq_jiaoyi2.jpg) no-repeat left top;
            height: 100%;
            width: 100%;
            margin-right: 320px;
            font-size: 16px
        }

        .domainout {
            padding: 50px 380px 50px 100px
        }

        .domainout p {
            line-height: 50px;
        }

        .domainout p span {
            display: inline-block;
            width: 120px;
            text-align: right;
            margin-right: 5px
        }

        strong.red {
            color: #ff7e00;
            font-size: 24px
        }

        .right {
            background-color: #2780d9;
            height: 100%;
            width: 320px;
            position: absolute;
            right: 50px;
            top: 0;
            color: #fff;
            padding: 0px 20px 0px 20px;
            font-size: 16px
        }

        .right h2 {
            color: #fff;
            border-bottom: 1px solid #1071d2;
            height: 56px;
            line-height: 56px;
            font-size: 20px;
            text-align: center
        }

        .imgpic {
            padding: 25px 0 20px 0
        }

        .contact {
            margin-left: 50px
        }

        .contact p {
            line-height: 40px
        }

        a {
            text-decoration: none;
        }

        .text-c {
            text-align: center;
        }

        .back {
            cursor: pointer;
            position: absolute;
            right: 5px;
            bottom: 5px;
        }

        .backBtn {
            background-color: #3cacff;
            display: inline-block;
            padding: 0px 10px;
            color: #fff;
            line-height: 25px;
            font-size: 12px;
            border-radius: 3px;
        }


    </style>

</head>


<body>
<div class="banner-out">
    <div class="banner1">
        <div class="wrap">
            <h1>CMHI-FILE</h1>
        </div>
    </div>
</div>

<div class="main-out ">
    <div class="wrap ">
        <div class="domain-con">
            <div class="left">
                <div class="domainout">

                    <p><span>文件名：</span>
                        <a th:text="${fileInfo.fileName} "></a>
                    </p>
                    <p><span>创建人：</span>
                        <a th:text="${fileInfo.createUser} "></a>
                    </p>
                    <p><span>创建时间：</span>
                        <a th:text="${fileInfo.createTime} "></a>
                    </p>
                    <p><span>文件类型：</span>
                        <a th:text="${fileInfo.fileType} "></a>
                    </p>
                    <p><span>短码：</span>
                        <a th:text="${shortId}"></a>
                    </p>
                    <p><span>存储类型：</span>
                        <a th:text="${fileInfo.storageType}"></a>
                    </p>
                    <p><span>点击数：</span><strong class="red">
                        <a th:text="${fileInfo.clickCount} "></a>
                    </strong></p>

                    <p><span></span><a th:href="@{'../../rest/file/down/'+${fileInfo.id}}" class="orangebtn"
                                       target="_blank">
                        立即下载（Download it !）
                    </a></p>

                </div>

            </div>

            <div class="right">

                <h2>手机扫码下载</h2>
                <div class="imgpic text-c">
                    <img id="local-qr" th:src="@{/rest/base/qr?content='正在加载中'}"
                         style="width: 130px;height: 130px" alt="">
                    <p class="mt-10"></p>
                </div>
                <div class="contact">
                    <p><a style="color: #00F7DE" th:text="${fileInfo.content} "></a></p>
                </div>


                <div class="back">
                    <a class="backBtn" th:href="@{'../../file/'}">返回主页</a>
                </div>

            </div>

        </div>

    </div>

</div>
<input type="hidden" th:value="${fileInfo.id}" name="fileId"/>
<input type="hidden" th:value="${fileInfo.accessUrl}" name="accessUrl"/>
<input type="hidden" th:value="${fileInfo.storageType}" name="storageType"/>


</body>
<script src="/static/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'laytpl', 'util'], function () {

        var $ = layui.$;
        var util = layui.util;

        var localUrl = window.location.host;
        var qrUrl = "/rest/base/qr?content=";
        var downUrl = localUrl + "/rest/file/down/" + $("[name=fileId]").val();
        var storageType = $("[name=storageType]").val();
        if (storageType.indexOf("Cos") > 0) {
            var accessURL = $("[name=accessUrl]").val();
            $("#local-qr").attr("src", qrUrl + accessURL);
            $(".orangebtn").attr("href", accessURL);
        } else {
            $("#local-qr").attr("src", qrUrl + downUrl);

        }

    });
</script>

</html>